<template>
  <section class="departmentManage">
    <div class="info-title"><span class="icon"></span>节点管理</div>
    <div class="content mainBodyContent">
      <el-button type="primary"  class="margin-b20" @click="addDepartment()" v-resetClick>添加节点</el-button>
      <div class="flex_box">
        <div class="left">
          <el-input :maxlength='50'
            class="input-box"
            placeholder="输入模块名称"
            v-model="filterText">
          </el-input>
          <el-tree
            :data="partmentTreeData"
            :props="defaultProps"
            default-expand-all
            node-key="id"
            ref="tree"
            :filter-node-method="filterNode"
            :getCurrentNode="checkDepartment"
            :expand-on-click-node="false"
            @node-click="clickNode"
            :check-on-click-node="true">
             <span style="height:35px;line-height:35px;" slot-scope="{ node }">
              <i class="el-icon-menu"></i>
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
        <div class="right">
          <el-form label-width="100px">
            <div class='right_title'>基本信息</div>
            <el-form-item label="节点名称">
              <span>{{checkData.name}}</span>
            </el-form-item>
            <el-form-item label="上级节点">
              <span>{{checkData.pidName}}</span>
            </el-form-item>
          </el-form>
          <div class="footer">
            <el-button @click="delDepartment" v-resetClick>删除</el-button>
            <el-button type="primary" @click="editDepartment(checkData)" v-resetClick class="btn-margin-l">编辑</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="visibleTitle"
      :visible.sync="departmentVisible" width="500px">
      <el-form ref="departmentForm" :rules="rules" :model="departmentForm">
        <el-form-item label="节点名称:" prop="name">
          <el-input v-model="departmentForm.name"  :placeholder="multiLanguage ? '不超过20个字' : '不超过10个字'" class="select-boxs"></el-input>
        </el-form-item>
        <el-form-item label="上级节点:" prop="pid">
          <el-select v-model="departmentForm.pid" collapse-tags placeholder="请选择节点" @change="selectChange(departmentForm)"  class="select-boxs">
            <el-option v-for="(item, key) in partmentList" :disabled="visibleTitle === '编辑节点' && item.id === checkData.id" :key="key" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序:"  prop="sort" class="sort">
          <el-input v-model.number="departmentForm.sort" autocomplete="off" style="width: 200px;" placeholder="请输入排序" type="number"></el-input><span class="mark"><i class="el-icon-warning-outline"></i>数字越大越靠前</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="departmentVisible = false" v-resetClick>取 消</el-button>
        <el-button type="primary" @click="departmentGo" v-resetClick>确 认</el-button>
      </span>
    </el-dialog>
  </section>
</template>
<script>
import {modelnodelist, modelnodedel, modelnodeupdate, modelnodeadd} from 'api/txEquipment/index'
export default {
  data () {
    let validateName = (rule, value, callback) => {
      if (this.multiLanguage) {
        if (value === '') {
          callback(new Error('请输入节点'))
        } else if (value.length > 20) {
          callback(new Error('请输入20个字符以内节点名称'))
        } else {
          callback()
        }
      } else {
        if (value === '') {
          callback(new Error('请输入节点'))
        } else if (value.length > 10) {
          callback(new Error('请输入10个字符以内节点名称'))
        } else {
          callback()
        }
      }
    }
    let validatehighleave = (rule, value, callback) => {
      if (value === '') {
        callback()
      } else {
        callback()
      }
    }
    return {
      defaultProps: {
        label: 'name'
      },
      departmentVisible: false,
      visibleTitle: '',
      checkData: {},
      partmentList: [],
      partmentTreeData: [],
      rules: {
        name: [
          { validator: validateName, trigger: 'blur' }

        ],
        pid: [
          { validator: validatehighleave, trigger: 'change' }
        ]
      },
      multiLanguage: false,
      departmentForm: {
        name: '',
        pid: '',
        sort: 0
      },
      path: '',
      filterText: ''
    }
  },
  async created () {
    this.multiLanguage = window.sessionStorage.multiLanguage
    this.getData()
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    // 获取部门列表
    getData () {
      modelnodelist({}).then(res => {
        let myArr = []
        let myData = JSON.parse(JSON.stringify(res.data))
        res.data.push({id: 0, name: '无'})
        this.partmentList = res.data
        if (res.data && res.data[0] && res.data[0].pid === 0) {
          res.data[0].pidName = '无'
        }
        this.checkData = res.data && res.data[0]
        myData.forEach(item => {
          item.children = []
          myData.forEach(val => {
            if (item.id === val.pid) {
              item.children.push(val)
            }
          })
          if (item.pid === 0) {
            myArr.push(item)
          }
        })
        this.partmentTreeData = myArr
      })
    },
    // 部门筛选
    filterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 选中部门
    clickNode (data, node, res) {
      this.partmentList.forEach(item => {
        if (item.id === data.pid) {
          data.pidName = item.name
        }
      })
      this.checkData = data
    },
    selectChange (data) {
      let path = '/'
      this.partmentList.forEach(item => {
        if (item.id !== 0 && item.id === this.departmentForm.pid) {
          path = item.path
        }
      })
      this.path = path
    },
    // 新增部门
    addDepartment () {
      this.visibleTitle = '新增节点'
      this.departmentVisible = true
      this.departmentForm.name = ''
      this.departmentForm.pid = ''
      this.departmentForm.sort = 0
    },
    // 编辑部门
    editDepartment (data) {
      this.visibleTitle = '编辑节点'
      this.departmentVisible = true
      this.departmentForm.name = data.name
      this.departmentForm.pid = data.pid
      this.departmentForm.sort = data.sort
    },
    // 删除部门
    delDepartment () {
      let text = '<strong>您确认要删除该节点吗？</strong><br/><strong style="color: #999;">注：删除前请确认该部门下无下级节点<strong>'
      this.$confirm(text, '删除提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString: true,
        type: 'warning'
      }).then(() => {
        modelnodedel({id: this.checkData.id}).then(res => {
          this.$message({
            message: '删除节点成功',
            type: 'success'
          })
          this.getData()
        })
      }).catch(() => {
      })
    },
    departmentGo () {
      this.$refs.departmentForm.validate(valid => {
        if (valid) {
          if (this.path.split('/').length >= 6) {
            return this.$message({
              message: '不允许添加超过5级节点，请重新选择上级节点',
              type: 'warning'
            })
          }
          if (this.visibleTitle === '新增节点') {
            modelnodeadd({name: this.departmentForm.name, pid: this.departmentForm.pid ? this.departmentForm.pid : 0, sort: this.departmentForm.sort}).then(res => {
              this.$message({
                message: '添加节点成功',
                type: 'success'
              })
              this.departmentVisible = false
              this.getData()
            })
          } else {
            modelnodeupdate({id: this.checkData.id, name: this.departmentForm.name, pid: this.departmentForm.pid, sort: this.departmentForm.sort}).then(res => {
              this.$message({
                message: '添加节点成功',
                type: 'success'
              })
              this.departmentVisible = false
              this.getData()
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.departmentManage{
  height: 100%;
  background: #fff;
  .content{
    margin: 30px;
    .margin-b20{
      margin-bottom: 20px;
    }
    .flex_box{
      display: flex;
      height: calc(100%);
      .left{
        flex: 0.5;
        padding-right: 50px;
        margin-right: 80px;
        .input-box{
          margin-bottom: 20px;
        }
        /deep/ .el-tree-node__content .el-tree-node__label{
          padding: 8px 0;
        }
      }
      .right{
        display: flex;
        flex: 0.5;
        height: calc(100% - 150px);
        margin-right: 80px;
        padding: 20px;
        background: #EDF1F7;
        border-radius: 10px;
        flex-direction: column;
        justify-content: space-between;
        .right_title{
          font-size: 18px;
          font-weight: bold;
          display: 'inline-block';
          padding-left: 32px;
          margin-bottom: 20px;
        }
        .footer{
          padding: 15px 40px;
        }
      }
    }
  }
  .mark {
    margin-left: 20px;
  }
  .sort {
    margin-left: 30px;
  }
}
.select-boxs{
  width: 250px;
}
</style>
<style>
.el-tree-node__content{
  height: 100%!important;
}
</style>
